<g:set var="pictures" value="${productInstance.pictures.toArray()}" />
<div class="product-img-box">
  <div class="product-image product-image-zoom">
  <div id="wrap" style="top:0px;z-index:9999;position:relative;">
    <a href="${createLink(controller:'picture', action:'getPic', id:pictures[0].id)}"
            class="cloud-zoom" 
            id="zoom1" 
            rel="position: &#39;inside&#39;" 
            style="position: relative; display: block; "> 
      <img src="${createLink(controller:'picture', action:'getPic', id:pictures[0].id)}" 
           width="354" 
           height="354" 
           alt="${productInstance.name}" 
           style="display: block; " /> 
    </a>
    <div class="mousetrap" 
         style="background-image:url(&quot;.&quot;);z-index:999;position:absolute;width:354px;height:354px;left:0px;top:0px;">
    </div>
  </div>
</div>
<div class="more-views">
  <ul>
    <g:each in="${pictures}" var="picture" status="i">
      <li>
      <a href="${createLink(controller:'picture', action:'getPic', id:picture.id)}" 
         class="cloud-zoom-gallery" 
         rel="useZoom: &#39;zoom1&#39;, smallImage: &#39;${createLink(controller:'picture', action:'getPic', id:picture.id, absolute:true)}&#39; "> 
        <img src="${createLink(controller:'picture', action:'getPic', id:picture.id)}"
             width="75"
             height="75"
             alt="Thumbnail ${i}" />
      </a>
    </li>
    </g:each>
  </ul>
</div>
</div>